<template>
	<view>
		<view class="wrap">
			
			<u-input v-model="realname" border placeholder="请输入联系人姓名"></u-input>
			<view  class="u-margin-top-20"></view>
			<u-input v-model="phone" type="Number" border placeholder="请输入联系人电话"></u-input>
			<view  class="u-margin-top-20"></view>
			
			<view class="page-title">合同</view>
			<view class="contract">
				<scroll-view scroll-y="true" style="height: 500rpx;">
					<mp-html :content="html" lazy-load></mp-html>
				</scroll-view>
			</view>
			<view class="pay-choose">
				<u-radio-group v-model="value">
						<view class="line-radio u-flex" v-for="(item, index) in list" :key="index" @click="radioGroupChange(item.id)">
							<text class="iconfont" :class="[item.icon]"></text>
							<view class="title">{{item.name}}</view>
							<u-radio :name="item.id" active-color="#de1f1c"></u-radio>
						</view>
				</u-radio-group>
			</view>
			<view class="pay-btn">
				<u-button shape="circle" @click="submit" type="primary">支付</u-button>
			</view>
			<view class="tips">
				<u-checkbox label-size="26" active-color="#de1f1c" shape="circle" v-model="checked">已同意<text
				 @click.sotp="$app.openXY(9)" style="color: #1f87f9;">《支付监管协议》</text></u-checkbox>
			</view>
		</view>
		
		<!-- 底部安全区适配 -->
		<view class="safe-area-inset-bottom"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				realname:"",
				phone:"",
				html:'',
				list: [
					{
						name: '微信支付',
						icon:'icon-weixin',
						id:'wx'
					}
				],
				value: 'wx',
				checked:!0,
				
				id:'',
				type:'',
				ids:'',
				types:'',
				house_deposit:''
			}
		},
		methods: {
			radioGroupChange(name){
				this.value = name
			},
			submit(){
				
				
			if(!this.realname){this.$u.toast('请输入联系人姓名');return}
			console.log(this.$u.test.mobile(this.phone))
			if(!this.$u.test.mobile(this.phone)){this.$u.toast('请输入联系人电话');return}
				
				if(!this.checked){this.$u.toast('请先阅读并同意协议');return}
				let payType = this.list.find(item=>item.id ===this.value)
				let data = {
					id:this.id,
					type:this.type,
					ids:this.ids,
					types:this.types,
					house_deposit:this.house_deposit,
					payType:payType.item,
					realname:this.realname,
					phone:this.phone,
				}
				data = encodeURIComponent(JSON.stringify(data))
				
				if(this.value == 'wx'){
					this.$app.jump('/pages/house/pay/pay-wx?data=' + data)
				}else{
					if(payType.item.type === 1){
						// 银行卡
						this.$app.jump('/pages/house/pay/pay-bank?data=' + data)
					}else{
						// 支付宝
						this.$app.jump('/pages/house/pay/pay-ali?data=' + data)
					}
				}
			},
			getPayType(){
				this.$u.post('/api/pay/method').then(res=>{
					res.forEach(item=>{
						this.list.push({
							name:item.name,
							item,
							icon:item.type === 1 ? 'icon-shuaqiaqiapianyinhangqia' : 'icon-zhifubao1',
							id:item.id
						})
					})
				})
			}
		},
		onLoad({id,type,ids,types,house_deposit}) {
			
			console.log(house_deposit,"house_deposit")
			// id 房子id
			// type 房子类型 
			// ids 管家 id
			// types 0 定金 1意向金
			this.id = id
			this.type = type
			this.ids = ids
			this.types = types
			this.house_deposit = house_deposit
			
			this.$u.api.contractDetails({id:Number(types) + 1}).then(res=>{
				this.html = res.content
			})
			this.getPayType()
		},
		onReady() {
			this.$app.setTitle(this.types == 1 ? '支付意向金' : '支付定金')
		}
	}
</script>

<style lang="scss">
	.wrap{padding: 30rpx;}
	.page-title{font-size: #111;padding-bottom: 24rpx;}
	.contract{border-radius: 20rpx;border: 1rpx solid #ddd;padding: 10rpx;}
	.pay-choose{border-radius: 20rpx;box-shadow: 0 4rpx 10rpx #eee;padding: 8rpx 20rpx;margin-top: 20rpx;
		.line-radio{border-bottom: 1rpx solid #e0e0e0;height: 110rpx;padding: 0 10rpx;
			&:last-child{border-bottom: 0;}
			.title{margin-right: auto;}
			.icon-weixin{color: #09bb07;font-size: 50rpx;margin-right: 20rpx;}
			.icon-zhifubao1{color: #1bc1fa;font-size: 50rpx;margin-right: 20rpx;}
			.icon-shuaqiaqiapianyinhangqia{color: #fff;font-size: 30rpx;margin-right: 20rpx;border-radius: 50%;background-color: #fe9c01;width: 50rpx;height: 50rpx;text-align: center;line-height: 50rpx;}
			/deep/ .u-radio__label{display: none;}
		}
	}
	.pay-btn{padding-top: 130rpx;}
	.tips{padding: 30rpx 10rpx;}
</style>
